<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="lib/mui.min.css">
		<link rel="stylesheet" href="css/swiper.min.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
				font-size: 20px;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			
			.mui-fullscreen .mui-segmented-control~.mui-slider-group {
				position: absolute;
				top: 40px;
				bottom: 0;
				width: 100%;
				height: auto;
			}
			
			.mui-scroll>.mui-active {
				color: #007aff;
				border-bottom: 2px solid #007aff!important;
				background: 0 0;
			}
			
			.mui-segmented-control.mui-scroll-wrapper {
				height: 40px;
			}
			
			.mui-control-item {
				height: 40px;
				line-height: 40px;
			}
			
			.mui-scroll-wrapper {
				/*background: #fff;*/
			}
			
			.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
				width: auto;
				height: 40px;
				white-space: nowrap;
				border-bottom: 2px solid #d8d8d8;
			}
			
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
				display: inline-block;
				width: auto;
				padding: 0;
				border: 0;
				margin: 0 18px;
			}
			
			.marque {
				background: #1493da;
				color: #fff!important;
				padding: 0 .5rem;
				height: 1.5rem;
				margin: 4px 0;
			}
			
			.marque p {
				color: #fff
			}
			
			.swiper-container {
				width: 100%;
				height: 140px;
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
			}
			
			.banner {
				/*margin-top: .2rem;*/
			}
			
			.banner .mui-slider {
				height: 180px;
			}
			
			.cont_item {
				background: #fff;
				padding: .5rem;
				display: flex;
				flex-direction: row;
				border-bottom: 1px solid #D8D8D8;
			}
			
			.cont_item:nth-last-of-type(1) {
				border-bottom: 0px solid #fff;
			}
			
			.cont_item_left {
				margin-right: .5rem;
				min-width: 5rem;
			}
			
			.cont_item_left img {
				width: 5rem!important;
				height: 3.5rem;
				vertical-align: bottom;
				border: 0;
			}
			
			.cont_item_right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.cont_tle {
				width: 100%;
				height: 2rem;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				margin: 0;
				font-size: .7rem;
				color: #5A5A5A;
				overflow: hidden;
			}
			
			.right_bt {
				margin: 0;
				font-size: .6rem;
				color: #A5A5A5;
				text-align: right;
			}
			
			.right_bt span {
				margin-right: .3rem;
			}
			
			marquee {
				height: 1.5rem;
				line-height: 1.5rem;
				font-size: .7rem;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-content">
					<div id="sliders" class="mui-sliders mui-fullscreens">
						<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
							<div class="mui-scroll">
								<a class="mui-control-item mui-active" href="#item1mobile">
									最新
								</a>
								<span class="mui-control-item hot_at" id="ceshi">
									热帖
								</span>
								<a class="mui-control-item" href="#item3mobile">
									企业平台
								</a>
								<a class="mui-control-item" href="#item4mobile">
									招聘
								</a>
								<a class="mui-control-item" href="#item5mobile">
									文库
								</a>

							</div>
						</div>
						<!--<div class="mui-slider-group">-->
							<div id="mobiles">

								<div class="marque">
									<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100%"> 这里是要滚动的内容这里是要滚动的内容这里是要滚动的内容 </marquee>
								</div>
								<div class="banner">
									<div class="swiper-container">
										<div class="swiper-wrapper">
											<div class="swiper-slide" style="background-image:url(img/cbd.jpg)"></div>
											<div class="swiper-slide" style="background-image:url(img/muwu.jpg)"></div>
											<div class="swiper-slide" style="background-image:url(img/shuijiao.jpg)"></div>
										</div>
										<!-- Add Pagination -->
										<div class="swiper-pagination swiper-pagination-white"></div>
									</div>
								</div>

								<div class="article_cont">
									<div class="cont_item">
										<div class="cont_item_left">
											<img src="img/001.jpg">
										</div>
										<div class="cont_item_right">
											<p class="cont_tle">我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题</p>
											<p class="right_bt"><span>今天 10:00</span><span>阅读 (100)</span><span>评论 (12)</span></p>
										</div>
									</div>
									<div class="cont_item">
										<div class="cont_item_left">
											<img src="img/001.jpg">
										</div>
										<div class="cont_item_right">
											<p class="cont_tle">我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题</p>
											<p class="right_bt"><span>今天 10:00</span><span>阅读 (100)</span><span>评论 (12)</span></p>
										</div>
									</div>
									<div class="cont_item">
										<div class="cont_item_left">
											<img src="img/001.jpg">
										</div>
										<div class="cont_item_right">
											<p class="cont_tle">我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题</p>
											<p class="right_bt"><span>今天 10:00</span><span>阅读 (100)</span><span>评论 (12)</span></p>
										</div>
									</div>
									<div class="cont_item">
										<div class="cont_item_left">
											<img src="img/001.jpg">
										</div>
										<div class="cont_item_right">
											<p class="cont_tle">我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题</p>
											<p class="right_bt"><span>今天 10:00</span><span>阅读 (100)</span><span>评论 (12)</span></p>
										</div>
									</div><div class="cont_item">
										<div class="cont_item_left">
											<img src="img/001.jpg">
										</div>
										<div class="cont_item_right">
											<p class="cont_tle">我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题</p>
											<p class="right_bt"><span>今天 10:00</span><span>阅读 (100)</span><span>评论 (12)</span></p>
										</div>
									</div>
									<div class="cont_item">
										<div class="cont_item_left">
											<img src="img/001.jpg">
										</div>
										<div class="cont_item_right">
											<p class="cont_tle">我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题我是标题，我是标题</p>
											<p class="right_bt"><span>今天 10:00</span><span>阅读 (100)</span><span>评论 (12)</span></p>
										</div>
									</div>
								</div>

							</div>
							

						<!--</div>--><!--muislider-->
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="lib/jquery-2.1.4.js"></script>
		<script src="lib/mui.min.js"></script>
		<!--<script src="lib/mui.pullToRefresh.js"></script>
		<script src="lib/mui.pullToRefresh.material.js"></script>-->
		<script type="text/javascript" src="js/swiper.js"></script>
		<script>
			mui.init();
			//mui('.mui-slider').slider().setStopped(true);

			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: '.swiper-pagination',
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				spaceBetween: 30,
				effect: 'fade',
				loop: true,
				autoplay: 2000
			});

			$(document).on("click","#ceshi",function(){
				alert('sb');
				console.log('sbbbb')
				window.location.href = 'http://www.baidu.com';
				
			})
			
			$('.hot_at').click(function() {
				alert('sb')
				window.location.href = 'http://www.baidu.com'
			})
			
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						contentnomore:'没有更多数据了,亲！',
						callback: pullupfresh
					}

				}
			});
			
			function pulldownRefresh() {
				setTimeout(function() {
					location.reload();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
				//mui('#pullrefresh').pullRefresh().setStopped(true);
			}
			
			function pullupfresh(){
				console.log('im refresh');
				this.endPullupToRefresh(true);
			}
			
		</script>
	</body>

</html>